import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import address from './address'

Vue.use(Vuex)

const myPlugin = (store) => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    localStorage.setItem('state', JSON.stringify(state))
  })
}

export default new Vuex.Store({
  state: {
    token: JSON.parse(localStorage.getItem('state'))?.token || '',
    // 用户信息
    userInfo: {},
    bookList: JSON.parse(localStorage.getItem('state'))?.bookList || [],
    darkMode: JSON.parse(localStorage.getItem('state'))?.darkMode || '',
    bookRack: JSON.parse(localStorage.getItem('state'))?.bookRack || [], // 书架
    detailItemArr: [],
    copyArr: [], // 拷贝书架数据
    tabIndexArr: JSON.parse(localStorage.getItem('state'))?.tabIndexArr || [], //
    divideArr: [], // 放置需要分组的书籍
    // 评论区域
    commentsArr: JSON.parse(localStorage.getItem('state'))?.commentsArr || [],
    // 缓存的发布的数据，
    unpublishedArrr:
      JSON.parse(localStorage.getItem('state'))?.unpublishedArrr || [],
  },
  // 调用 mutations函数用commit
  mutations: {
    // 设置缓存的未发布的消息 // set_unpublish_arr
    SET_UNPUBLISH_ARR(state, item) {
      state.unpublishedArrr.push(item)
    },
    // 1. 登陆设置token 和 设置用户信息 // set_login_token
    SET_LOGIN_INFO(state, { token, userInfo }) {
      state.token = token
      state.userInfo = userInfo
    },
    // 1. 初始化请求设置书籍
    SET_BOOK_LIST(state, data) {
      data.forEach((item) => {
        // 加一个字段，是否加入书架
        item.isBookRack = false
        item.check = false
      })
      state.bookList = data
    },
    // 进入页面，将请求过来的数据和书架中已经存在的数据，对比，统一加入的字段一致性
    SET_INIT_COMPARE_BOOKLIST(state) {
      state.bookList.forEach((item) => {
        state.bookRack.forEach((v) => {
          if (v.id === item.id) {
            item.isBookRack = v.isBookRack
          }
        })
      })
    },
    // 2. 设置深色模式
    SET_DARK_MODE(state, data) {
      state.darkMode = data
    },
    // 3. 过滤出详情数据
    SET_DETAIL_ITEM(state, id) {
      console.log('详情：id:', id)
      console.log('state.bookList:', state.bookList)
      state.detailItemArr = state.bookList.filter((v) => v.id == id)
      console.log('详情：id:', state.detailItemArr)
    },
    // 4. 将详情数据，加入书架，
    TO_BOOK_RACK(state, id) {
      /**
       * 加入书架，控制字段显示隐藏
       * 1. 更改状态 isBookRack 是否加入书架的这个状态
       * 2. 点击切换这个状态 true/false
       * 3. 基于这个true 和false过滤出想要的书架数据
       */

      state.bookList.forEach((item) => {
        if (item.id === state.detailItemArr[0].id) {
          item.isBookRack = !item.isBookRack
        }
      })
      // 3. 过滤出书架书架（基于状态的改变）
      state.bookRack = state.bookList.filter((v) => v.isBookRack)
    },
    // 书架分组效果
    /**
     *
     * 1. 选中书籍
     * 2. 需要知道用户选择的第一本书的那个位置，因为最终分组的那个地方要显示这个分组
     * 3. 进行分组的时候，数据结构要改变
     * [book1, book2, book3, book4, book5]
     * b2 b3 分成一个组 -> b2
     * b3 b4 b5 分成一个组 -> b3
     * [b1, [group], b4, b5] 变成了一个二维数组，然后渲染二维数组
     */
    // 5. 拷贝书架书架(进入书架，调用这个函数)
    COPY_BOOK_RACK(state, data) {
      state.copyArr = [...state.bookRack]
      console.log('拷贝的书架数据：', state.copyArr)
    },

    // 6. 分组选择（过滤下标，过滤分组数据）
    DIVIDE_SELECT_BOOK_ITEM(state, { item, index }) {
      // 改变选中状态，基于选中状态，做出以下操作

      // 1. 改变状态
      item.check = !item.check
      if (item.check) {
        // 2. 收集下标
        state.tabIndexArr.push(index)
        // 3. 因为要取到最小下标，所以需要排序
        state.tabIndexArr = state.tabIndexArr.sort()
      } else {
        state.tabIndexArr.splice(state.tabIndexArr.indexOf(index), 1)
      }
      // 4. 过滤用户选中的书籍
      state.divideArr = state.bookRack.filter((v) => v.check)
    },
    // 7. 分组 （过滤需要分组的数据，分组）
    DIVIDE_GROUP_BOOK_RACK(state, { name }) {
      if (state.divideArr.length) {
        // 1. 找到没有选中的进行分组，[]
        state.bookRack = state.bookRack.filter((v) => !v.check)
        // 2. 分组
        state.bookRack.splice(state.tabIndexArr[0], 0, {
          name,
          divideArr: state.divideArr,
        })
        // 3. 清空（可以分很多次组，所以需要清空数组，进行下一次分组）
        state.divideArr = []
        // 4. 清空下标数组
        state.tabIndexArr = []
      }
    },
    // 8. 恢复分组
    REPLY_GROUP(state) {
      state.copyArr.forEach((item) => {
        item.check = false
      })
      state.bookRack = state.copyArr
    },
    // 9. 存储评论内容
    // set_comments_content
    SET_COMMENTS_CONTENT(state, item) {
      state.commentsArr.unshift(item)
    },
  },
  // 调用 actions的函数用dispatch
  actions: {
    async FetchBookList({ commit }, params) {
      const book = await axios.get('/api/bookList', { params })
      commit('SET_BOOK_LIST', book.data.data)
      return { code: 0, msg: 'success' }
    },
    // async FetchDetailItem({ commit }, id) {
    //   const res = await this.$http.get('/api/detail', { params: { id } })
    //   console.log('res:', res.data.data)
    //   commit('SET_DETAIL_ITEM', res.data.data)
    // },
  },
  plugins: [myPlugin],

  modules: {
    address,
  },
})
